<template>
  <div class="model-showcase">
    <!-- 使用 NavBar 组件并保持原有样式 -->
    <NavBar
      :is-logged-in="isLoggedIn"
      @login="handleLogin"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />

    <!-- 页面标题 - 修改为白色背景带边框 -->
    <div class="page-header">
      <div class="header-content">
        <h1>探索广西区分行精选<span class="ai-text">AI模型</span></h1>
        <p>探索各种先进的AI模型，满足不同应用场景需求，快速构建智能应用</p>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧筛选栏 -->
      <div class="filter-sidebar">
        <div class="sidebar-section">
          <h3>模型筛选</h3>

          <div class="filter-group">
            <h4>模型类型</h4>
            <div class="button-options">
              <button
                v-for="type in modelTypes"
                :key="type.value"
                :class="{ active: selectedModelTypes.includes(type.value) }"
                @click="toggleModelType(type.value)"
                class="filter-button"
              >
                {{ type.label }}
              </button>
            </div>
          </div>

          <div class="filter-group">
            <h4>类别</h4>
            <div class="button-options">
              <button
                v-for="category in categories"
                :key="category.value"
                :class="{ active: selectedCategories.includes(category.value) }"
                @click="toggleCategory(category.value)"
                class="filter-button"
              >
                {{ category.label }}
              </button>
            </div>
          </div>

          <div class="filter-group">
            <h4>适用场景</h4>
            <div class="button-options">
              <button
                v-for="scenario in scenarios"
                :key="scenario.value"
                :class="{ active: selectedScenarios.includes(scenario.value) }"
                @click="toggleScenario(scenario.value)"
                class="filter-button"
              >
                {{ scenario.label }}
              </button>
            </div>
          </div>

          <div class="filter-group">
            <h4>提供方</h4>
            <div class="button-options">
              <button
                v-for="provider in providers"
                :key="provider.value"
                :class="{ active: selectedProviders.includes(provider.value) }"
                @click="toggleProvider(provider.value)"
                class="filter-button"
              >
                {{ provider.label }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧模型卡片区域 - 根据图片重新设计 -->
      <div class="models-container">
        <div class="models-header">
          <div class="models-count">
            <span class="count-number">{{ filteredModels.length }}</span>个模型
          </div>
          <div class="search-box">
            <div class="search-input-wrapper">
              <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M21 21L16.65 16.65" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <input
                type="text"
                v-model="searchQuery"
                placeholder="搜索模型名称..."
                class="search-input"
              >
            </div>
          </div>
        </div>

        <!-- 筛选状态显示 - 移除背景条样式 -->
        <div class="filter-status-bar" v-if="hasActiveFilters" style="background: transparent; border: none; padding: 0 0 16px 0;">
          <button class="clear-filters-btn" @click="clearFilters">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            清除筛选
          </button>
        </div>

        <div class="models-grid">
          <div
            v-for="model in filteredModels"
            :key="model.id"
            class="model-card"
            :class="{'has-deployment': model.supportDeployment}"
          >
            <!-- 卡片顶部：紧凑布局 -->
            <div class="card-top">
              <div class="model-header">
                <div class="model-basic-info">
                  <div class="model-logo" :class="getLogoColorClass(model.id)">
                    {{ model.logo }}
                  </div>
                  <div class="model-title-section">
                    <h3 class="model-name">{{ model.name }}</h3>
                    <div class="model-type-tags">
                      <span class="model-type-tag">{{ model.modelType }}</span>
                      <span class="category-tag">{{ model.type }}</span>
                      <span v-if="model.supportDeployment" class="deployment-tag">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        支持部署
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 卡片中部：应用场景标签 -->
            <div class="card-middle">
              <div class="scenarios-section">
                <div class="scenarios-tags">
                  <span
                    v-for="scenario in getDisplayScenarios(model.scenarios)"
                    :key="scenario"
                    class="scenario-tag"
                  >
                    {{ scenario }}
                  </span>
                  <span v-if="model.scenarios.length > 3" class="more-scenarios">
                    +{{ model.scenarios.length - 3 }}个
                  </span>
                </div>
              </div>
            </div>

            <!-- 卡片底部：描述和更新时间 -->
            <div class="card-bottom">
              <p class="model-description">{{ model.description }}</p>

              <div class="card-footer">
                <div class="update-info">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                  更新于 {{ model.updateDate }}
                </div>
                <!-- 新增的立即探索按钮 -->
                <!--<button class="explore-button" @click="handleExplore(model)">
                  立即探索
                </button>-->
              </div>
            </div>
          </div>
        </div>

        <!-- 无结果状态 -->
        <div class="no-results" v-if="filteredModels.length === 0">
          <div class="no-results-content">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="#9CA3AF" stroke-width="2"/>
            </svg>
            <h3>未找到匹配的模型</h3>
            <p>请尝试调整筛选条件或搜索关键词</p>
            <button class="clear-filters-btn large" @click="clearFilters">清除所有筛选</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用 Footer 组件 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'

export default {
  name: "LanguageModels",
  components: {
    NavBar,
    Footer
  },
  props: {
    presetFilter: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      isLoggedIn: false,
      themeIcon: 'light',
      searchQuery: '',
      selectedModelTypes: [],
      selectedCategories: [],
      selectedScenarios: [],
      selectedProviders: [],

      // 预设筛选配置
      presetFilters: {
        nlp: {
          selectedCategories: ['自然语言处理'],
          selectedScenarios: ['文本生成', '语义理解', '情感分析','机器翻译']
        },
        cv: {
          selectedCategories: ['计算机视觉'],
          selectedScenarios: ['图像识别', '人脸识别', '目标检测', '图像生成']
        },
        analytics: {
          selectedCategories: ['预测分析'],
          selectedModelTypes: ['基础模型'],
          selectedScenarios: ['时间序列预测', '回归分析', '数据分类', '异常检测'],
        }
      },

      // 模型类型选项
      modelTypes: [
        { value: '基础模型', label: '基础模型' },
        { value: '大模型', label: '大模型' }
      ],

      // 类别选项
      categories: [
        { value: '自然语言处理', label: '自然语言处理' },
        { value: '计算机视觉', label: '计算机视觉' },
        { value: '预测分析', label: '预测分析' }
      ],

      // 适用场景选项
      scenarios: [
        { value: '文本生成', label: '文本生成' },
        { value: '情感分析', label: '情感分析' },
        { value: '语义理解', label: '语义理解' },
        { value: '机器翻译', label: '机器翻译' },
        { value: '图像识别', label: '图像识别' },
        { value: '目标检测', label: '目标检测' },
        { value: '人脸识别', label: '人脸识别' },
        { value: '图像生成', label: '图像生成' },
        { value: '时间序列预测', label: '时间序列预测' },
        { value: '数据分类', label: '数据分类' },
        { value: '回归分析', label: '回归分析' },
        { value: '异常检测', label: '异常检测' }
      ],

      // 提供方选项
      providers: [
        { value: '百度', label: '百度' },
        { value: 'Meta', label: 'Meta' },
        { value: '百川智能', label: '百川智能' },
        { value: '智谱AI', label: '智谱AI' },
        { value: '零一万物', label: '零一万物' }
      ],

      models:[
        {
          "id": 1,
          "name": "BERT",
          "logo": "B",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本理解", "问答系统", "情感分析"],
          "supportDeployment": true,
          "description": "基于Transformer编码器的双向预训练模型，通过深层双向表示理解上下文语义。",
          "company": "Google",
          "updateDate": "2025/10/15",
          "versions": "3个版本",
          "color": "flat-blue"
        },
        {
          "id": 2,
          "name": "GPT-3",
          "logo": "G",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本生成", "对话系统", "代码生成"],
          "supportDeployment": true,
          "description": "自回归语言模型，具有1750亿参数，支持零样本学习，无需微调即可执行多种任务。",
          "company": "OpenAI",
          "updateDate": "2025/09/18",
          "versions": "5个版本",
          "color": "flat-green"
        },
        {
          "id": 3,
          "name": "Vision-Transformer",
          "logo": "V",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "目标检测"],
          "supportDeployment": true,
          "description": "将图像分割为图块并应用Transformer架构，在图像分类任务中表现优异。",
          "company": "Google",
          "updateDate": "2025/08/22",
          "versions": "2个版本",
          "color": "flat-red"
        },
        {
          "id": 4,
          "name": "CLIP",
          "logo": "C",
          "modelType": "基础模型",
          "type": "多模态",
          "scenarios": ["图文检索", "零样本分类"],
          "supportDeployment": true,
          "description": "学习图像和文本的联合表示，实现跨模态理解与检索。",
          "company": "OpenAI",
          "updateDate": "2025/07/30",
          "versions": "3个版本",
          "color": "flat-purple"
        },
        {
          "id": 5,
          "name": "DALL-E",
          "logo": "D",
          "modelType": "基础模型",
          "type": "多模态",
          "scenarios": ["图像生成", "创意设计"],
          "supportDeployment": false,
          "description": "根根据文本描述生成高质量图像，支持复杂场景和物体组合。",
          "company": "OpenAI",
          "updateDate": "2025/06/12",
          "versions": "2个版本",
          "color": "flat-orange"
        },
        {
          "id": 6,
          "name": "Video-Transformer",
          "logo": "V",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["目标检测", "人脸识别"],
          "supportDeployment": false,
          "description": "专门针对视频内容理解的Transformer模型，支持视频分类和行为识别。适用于交易监控、合规视频分析和风险评估等场景。",
          "company": "快手",
          "updateDate": "2025/09/22",
          "versions": "1个版本",
          "color": "flat-green"
        },
        {
          "id": 7,
          "name": "TimeSeries-Transformer",
          "logo": "T",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["时间序列预测", "回归分析"],
          "supportDeployment": false,
          "description": "专门用于时间序列预测的Transformer模型，在趋势分析和风险评估方面表现优异。适用于市场预测、经济指标分析和风险评估等场景。",
          "company": "度小满",
          "updateDate": "2025/09/22",
          "versions": "1个版本",
          "color": "flat-green"
        },
        {
          "id": 8,
          "name": "ResNet",
          "logo": "R",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "目标检测"],
          "supportDeployment": true,
          "description": "引入残差连接解决深层网络梯度消失问题，支持训练极深神经网络。",
          "company": "Microsoft",
          "updateDate": "2025/05/20",
          "versions": "4个版本",
          "color": "flat-cyan"
        },
        {
          "id": 9,
          "name": "AlexNet",
          "logo": "A",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "目标识别"],
          "supportDeployment": true,
          "description": "经典卷积神经网络架构，包含卷积层、池化层和全连接层，使用ReLU激活函数。",
          "company": "University of Toronto",
          "updateDate": "2025/04/15",
          "versions": "2个版本",
          "color": "flat-teal"
        },
        {
          "id": 10,
          "name": "Swin-Transformer",
          "logo": "S",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "语义分割"],
          "supportDeployment": true,
          "description": "分层视觉Transformer，通过移动窗口计算自注意力，实现输入图像大小的线性计算复杂度。",
          "company": "Microsoft",
          "updateDate": "2025/03/10",
          "versions": "3个版本",
          "color": "flat-orange"
        },
        {
          "id": 11,
          "name": "YOLO",
          "logo": "Y",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["实时目标检测", "视频分析"],
          "supportDeployment": true,
          "description": "单阶段目标检测算法，将检测任务视为回归问题，实现高速高精度目标识别。",
          "company": "University of Washington",
          "updateDate": "2025/02/28",
          "versions": "5个版本",
          "color": "flat-purple"
        },
        {
          "id": 12,
          "name": "Decision-Tree",
          "logo": "D",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["分类任务", "回归分析"],
          "supportDeployment": true,
          "description": "树形结构分类回归模型，通过递归划分数据集实现预测，易于解释。",
          "company": "多种机构",
          "updateDate": "2025/01/15",
          "versions": "多个版本",
          "color": "flat-teal"
        },
        {
          "id": 13,
          "name": "Random-Forest",
          "logo": "R",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["分类", "回归", "特征选择"],
          "supportDeployment": true,
          "description": "集成多棵决策树，通过投票或平均提高预测准确性和稳健性。",
          "company": "多种机构",
          "updateDate": "2024/12/20",
          "versions": "多个版本",
          "color": "flat-teal"
        },
        {
          "id": 14,
          "name": "SVM",
          "logo": "S",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["分类任务", "异常检测"],
          "supportDeployment": true,
          "description": "通过寻找最优超平面实现分类，适用于小样本和高维数据。",
          "company": "多种机构",
          "updateDate": "2024/11/05",
          "versions": "多个版本",
          "color": "flat-red"
        },
        {
          "id": 15,
          "name": "XGBoost",
          "logo": "X",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["分类", "回归", "排序"],
          "supportDeployment": true,
          "description": "梯度提升决策树算法，通过迭代训练多个弱学习器构建强预测模型。",
          "company": "多种机构",
          "updateDate": "2024/10/12",
          "versions": "多个版本",
          "color": "flat-purple"
        },
        {
          "id": 16,
          "name": "GAN",
          "logo": "G",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像生成", "数据增强"],
          "supportDeployment": true,
          "description": "生成对抗网络，包含生成器和判别器，通过对抗学习生成逼真数据。",
          "company": "多种机构",
          "updateDate": "2024/09/18",
          "versions": "多个版本",
          "color": "flat-orange"
        },
        {
          "id": 17,
          "name": "U-Net",
          "logo": "U",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分割", "医疗影像"],
          "supportDeployment": true,
          "description": "编码器-解码器结构，通过跳跃连接融合深浅特征，擅长图像分割任务。",
          "company": "多种机构",
          "updateDate": "2024/08/22",
          "versions": "3个版本",
          "color": "flat-green"
        },
        {
          "id": 18,
          "name": "T5",
          "logo": "T",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本生成", "翻译", "摘要"],
          "supportDeployment": true,
          "description": "将所有NLP任务统一为文本到文本格式，通过相同框架处理多种任务。",
          "company": "Google",
          "updateDate": "2024/07/30",
          "versions": "2个版本",
          "color": "flat-blue"
        },
        {
          "id": 19,
          "name": "BART",
          "logo": "B",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本生成", "摘要", "去噪"],
          "supportDeployment": true,
          "description": "双向自编码器与自回归解码器结合，适用于文本生成与理解任务。",
          "company": "Facebook",
          "updateDate": "2024/06/15",
          "versions": "2个版本",
          "color": "flat-red"
        },
        {
          "id": 20,
          "name": "Whisper",
          "logo": "W",
          "modelType": "基础模型",
          "type": "多模态",
          "scenarios": ["语音识别", "语音翻译"],
          "supportDeployment": true,
          "description": "端到端语音识别模型，支持多语言转录和翻译，鲁棒性强。",
          "company": "OpenAI",
          "updateDate": "2024/05/20",
          "versions": "3个版本",
          "color": "flat-purple"
        },
        {
          "id": 21,
          "name": "Stable-Diffusion",
          "logo": "S",
          "modelType": "基础模型",
          "type": "多模态",
          "scenarios": ["图像生成", "艺术创作"],
          "supportDeployment": true,
          "description": "潜在扩散模型，根据文本描述生成高质量多样化图像。",
          "company": "Stability AI",
          "updateDate": "2024/04/12",
          "versions": "4个版本",
          "color": "flat-orange"
        },
        {
          "id": 22,
          "name": "VGG",
          "logo": "V",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "特征提取"],
          "supportDeployment": true,
          "description": "深度卷积网络，使用小卷积核堆叠构建深层架构，特征提取能力强。",
          "company": "University of Oxford",
          "updateDate": "2024/03/08",
          "versions": "2个版本",
          "color": "flat-cyan"
        },
        {
          "id": 23,
          "name": "MobileNet",
          "logo": "M",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["移动端视觉", "实时识别"],
          "supportDeployment": true,
          "description": "轻量级网络，使用深度可分离卷积，平衡精度与效率，适合移动设备。",
          "company": "Google",
          "updateDate": "2024/02/14",
          "versions": "3个版本",
          "color": "flat-teal"
        },
        {
          "id": 24,
          "name": "RoBERTa",
          "logo": "R",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本理解", "情感分析"],
          "supportDeployment": true,
          "description": "BERT优化版本，调整训练策略，移除下一句预测任务，提升性能。",
          "company": "Facebook",
          "updateDate": "2024/01/20",
          "versions": "2个版本",
          "color": "flat-orange"
        },
        {
          "id": 25,
          "name": "GPT-2",
          "logo": "G",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本生成", "对话系统"],
          "supportDeployment": true,
          "description": "GPT系列重要版本，参数量适中，在多类NLP任务上表现优异。",
          "company": "OpenAI",
          "updateDate": "2023/12/15",
          "versions": "3个版本",
          "color": "flat-green"
        },
        {
          "id": 26,
          "name": "EfficientNet",
          "logo": "E",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "目标检测"],
          "supportDeployment": true,
          "description": "复合缩放方法平衡深度、宽度和分辨率，实现高效精度平衡。",
          "company": "Google",
          "updateDate": "2023/11/10",
          "versions": "3个版本",
          "color": "flat-purple"
        },
        {
          "id": 27,
          "name": "DeBERTa",
          "logo": "D",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["文本理解", "语义分析"],
          "supportDeployment": true,
          "description": "引入解耦注意力机制和增强掩码解码器，提升模型语言理解能力。",
          "company": "Microsoft",
          "updateDate": "2023/10/05",
          "versions": "2个版本",
          "color": "flat-teal"
        },
        {
          "id": 28,
          "name": "ViT-G",
          "logo": "V",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "视觉推理"],
          "supportDeployment": true,
          "description": "大规模视觉Transformer模型，参数量巨大，在多项视觉任务上创纪录。",
          "company": "Google",
          "updateDate": "2023/09/20",
          "versions": "1个版本",
          "color": "flat-red"
        },
        {
          "id": 29,
          "name": "Codex",
          "logo": "C",
          "modelType": "基础模型",
          "type": "自然语言处理",
          "scenarios": ["代码生成", "程序理解"],
          "supportDeployment": true,
          "description": "基于GPT-3专门训练用于代码生成与理解的模型，支持多种编程语言。",
          "company": "OpenAI",
          "updateDate": "2023/08/15",
          "versions": "2个版本",
          "color": "flat-purple"
        },
        {
          "id": 30,
          "name": "AlexNet",
          "logo": "A",
          "modelType": "基础模型",
          "type": "计算机视觉",
          "scenarios": ["图像分类", "目标识别"],
          "supportDeployment": true,
          "description": "开创性深度学习模型，在ImageNet竞赛中取得突破性成果，推动深度学习发展。",
          "company": "University of Toronto",
          "updateDate": "2023/07/20",
          "versions": "2个版本",
          "color": "flat-orange"
        },
        {
          "id": 31,
          "name": "Prophet",
          "logo": "P",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["时间序列预测", "需求预测"],
          "supportDeployment": true,
          "description": "由Facebook开发的时间序列预测模型，特别适合处理具有强季节性（如每日、每周、每年周期）的数据，并能将假日效应的影响纳入模型。它易于使用，对缺失数据和趋势变化不敏感，在商业预测（如销量、网站访问量）中应用广泛。",
          "company": "Facebook",
          "updateDate": "2025/10/30",
          "versions": "2个版本",
          "color": "flat-purple"
        },
        {
          "id": 32,
          "name": "LightGBM",
          "logo": "L",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["分类预测", "回归分析", "排序任务"],
          "supportDeployment": true,
          "description": "微软推出的基于决策树算法的梯度提升框架。它通过基于直方图的优化算法和Leaf-wise生长策略，在保证精度的同时显著提升了训练速度并降低了内存消耗，尤其适合处理高维特征的大规模数据集。",
          "company": "Microsoft",
          "updateDate": "2025/10/28",
          "versions": "5个版本",
          "color": "flat-teal"
        },
        {
          "id": 33,
          "name": "XGBoost",
          "logo": "X",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["结构化数据预测", "分类与回归"],
          "supportDeployment": true,
          "description": "一种可扩展的机器学习系统，实现了梯度提升决策树算法。它以出色的性能在众多数据科学竞赛中广受青睐，具有良好的防止过拟合能力，并支持并行处理。",
          "company": "多种机构",
          "updateDate": "2025/10/25",
          "versions": "多个版本",
          "color": "flat-orange"
        },
        {
          "id": 34,
          "name": "卡尔曼滤波",
          "logo": "K",
          "modelType": "基础模型",
          "type": "预测分析",
          "scenarios": ["状态估计", "传感器融合", "目标跟踪"],
          "supportDeployment": true,
          "description": "一种最优递归估计算法，用于从一系列存在噪声的观测值中估计动态系统的状态。它广泛应用于导航系统（如GPS）、机器人定位和控制领域，能够实现实时、高效的预测。",
          "company": "多种机构",
          "updateDate": "2025/10/20",
          "versions": "多个版本",
          "color": "flat-cyan"
        },
        {
          id: 35,
          name: 'MoE-Transformer',
          logo: 'M',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '机器翻译'],
          supportDeployment: false,
          description: '采用混合专家架构的大规模Transformer模型，在保持高性能的同时降低计算成本。适用于复杂数据分析、宏观经济预测和多维度风险评估等场景。',
          company: '零一万物',
          updateDate: '2025/04/24',
          versions: '1个版本',
          color: '#3b82f6'
        },

        // 新增模型开始
        {
          id: 36,
          name: 'ERNIE X1.1',
          logo: 'E',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['深度推理', '语义理解', '文本生成'],
          supportDeployment: true,
          description: '文心大模型X1.1在问答、工具调用、智能体、指令遵循、逻辑推理、数学、代码任务的效果显著提升，事实性显著提升；上下文长度扩展到64K tokens，支持更长的输入与对话历史。',
          company: '百度',
          updateDate: '2025/09/08',
          versions: '1个版本',
          color: '#3b82f6'
        },
        {
          id: 37,
          name: 'ERNIE X1 Turbo',
          logo: 'E',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['深度推理', '语义理解', '文本生成'],
          supportDeployment: true,
          description: '文心大模型X1具备更强的理解、规划、反思、进化能力。作为能力更全面的深度思考模型，文心X1兼备准确、创意和文采，在中文知识问答、文学创作、文稿写作、日常对话、逻辑推理、复杂计算及工具调用等方面表现尤为出色。',
          company: '百度',
          updateDate: '2025/07/04',
          versions: '2个版本',
          color: 'flat-orange'
        },
        {
          id: 38,
          name: '百度蒸汽机 Air',
          logo: '蒸',
          modelType: '基础模型',
          type: '计算机视觉',
          scenarios: ['视频生成'],
          supportDeployment: true,
          description: '百度蒸汽机 Air（MuseSteamer Air）视频生成模型，在主体一致性、物理规则、运镜效果以及生成速度等方面均有较好表现。',
          company: '百度',
          updateDate: '2025/10/22',
          versions: '1个版本',
          color: '#3b82f6'
        },
        {
          id: 39,
          name: '百度蒸汽机 2.0',
          logo: '蒸',
          modelType: '基础模型',
          type: '计算机视觉',
          scenarios: ['视频生成'],
          supportDeployment: true,
          description: '百度蒸汽机（MuseSteamer)音视一体化视频生成模型，支持单人、多人对话，实现多角色、场景、人声和环境音的协同生成和融合，并可唇形同步。影视级画面质感、丝滑运镜、以及逼真的人物情绪。',
          company: '百度',
          updateDate: '2025/10/22',
          versions: '1个版本',
          color: 'flat-orange'
        },
        {
          id: 40,
          name: 'ERNIE 4.5 Turbo VL',
          logo: 'E',
          modelType: '大模型',
          type: '计算机视觉',
          scenarios: ['视觉理解', '图像识别'],
          supportDeployment: true,
          description: '文心一言大模型全新版本，图片理解、创作、翻译、代码等能力显著提升，首次支持32K上下文长度，首Token时延显著降低。',
          company: '百度',
          updateDate: '2025/08/29',
          versions: '4个版本',
          color: '#3b82f6'
        },
        {
          id: 41,
          name: 'Kimi-K2-Instruct',
          logo: 'K',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '语义理解'],
          supportDeployment: true,
          description: '月之暗面提供的国内首个开源万亿参数MoE模型，具有 320 亿个激活参数和 1 万亿个总参数，具有卓越的编码和工具调用能力。',
          company: '其他',
          updateDate: '2025/08/01',
          versions: '1个版本',
          color: 'flat-purple'
        },
        {
          id: 42,
          name: 'ERNIE 4.5 Turbo',
          logo: 'E',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '语义理解'],
          supportDeployment: true,
          description: '文心4.5 Turbo在去幻觉、逻辑推理和代码能力等方面也有着明显增强。对比文心4.5，速度更快、价格更低。',
          company: '百度',
          updateDate: '2025/08/29',
          versions: '4个版本',
          color: 'flat-purple'
        },
        {
          id: 43,
          name: 'ERNIE 4.5',
          logo: 'E',
          modelType: '大模型',
          type: '计算机视觉',
          scenarios: ['视觉理解', '图像识别'],
          supportDeployment: true,
          description: '文心大模型4.5是百度自主研发的新一代原生多模态基础大模型，通过多个模态联合建模实现协同优化，多模态理解能力优秀；具备更精进的语言能力，理解、生成、逻辑、记忆能力全面提升。',
          company: '百度',
          updateDate: '2025/09/19',
          versions: '4个版本',
          color: 'flat-purple'
        },
        {
          id: 44,
          name: 'DeepSeek V3.2 Think',
          logo: 'D',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '深度推理'],
          supportDeployment: true,
          description: 'DeepSeek-V3.2-Exp 模型，这是一个实验性版本。作为迈向新一代架构的中间步骤，V3.2-Exp 在 V3.1-Terminus 的基础上引入了 DeepSeek Sparse Attention，针对长文本的训练和推理效率进行了探索性的优化和验证。',
          company: '深度求索',
          updateDate: '2025/10/09',
          versions: '1个版本',
          color: '#10b981'
        },
        {
          id: 45,
          name: 'DeepSeek V3.2',
          logo: 'D',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '语义理解'],
          supportDeployment: true,
          description: 'DeepSeek-V3.2-Exp 模型，这是一个实验性版本。作为迈向新一代架构的中间步骤，V3.2-Exp 在 V3.1-Terminus 的基础上引入了 DeepSeek Sparse Attention，针对长文本的训练和推理效率进行了探索性的优化和验证。',
          company: '深度求索',
          updateDate: '2025/10/09',
          versions: '1个版本',
          color: '#10b981'
        },
        {
          id: 46,
          name: 'DeepSeek V3.1 Think',
          logo: 'D',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '深度推理'],
          supportDeployment: true,
          description: 'DeepSeek V3.1是深度求索提供的文本生成类模型，拥有混合推理架构，实现了思考模式和非思考模式的有效融合。',
          company: '深度求索',
          updateDate: '2025/09/22',
          versions: '1个版本',
          color: '#10b981'
        },
        {
          id: 47,
          name: 'DeepSeek V3.1',
          logo: 'D',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '语义理解'],
          supportDeployment: true,
          description: 'DeepSeek V3.1是深度求索提供的文本生成类模型，拥有混合推理架构，实现了思考模式和非思考模式的有效融合。',
          company: '深度求索',
          updateDate: '2025/09/22',
          versions: '1个版本',
          color: '#10b981'
        },
        {
          id: 48,
          name: 'DeepSeek-V3',
          logo: 'D',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['文本生成', '语义理解'],
          supportDeployment: true,
          description: '由杭州深度求索人工智能基础技术研究有限公司自研的 MoE 模型，在百科知识、数学推理等多项任务上优势突出，评测成绩在主流榜单中位列开源模型榜首。',
          company: '深度求索',
          updateDate: '2025/03/26',
          versions: '5个版本',
          color: '#10b981'
        },
        {
          id: 49,
          name: 'DeepSeek-R1',
          logo: 'D',
          modelType: '大模型',
          type: '自然语言处理',
          scenarios: ['深度推理', '语义理解'],
          supportDeployment: true,
          description: '由杭州深度求索人工智能基础技术研究有限公司自研，在数学、代码、自然语言推理等任务上性能表现优异。',
          company: '深度求索',
          updateDate: '2025/06/19',
          versions: '5个版本',
          color: '#10b981'
        },
      ]
    }
  },
  mounted() {
    // 页面加载时应用预设筛选
    this.applyPresetFilter();
  },
  watch: {
    // 监听presetFilter变化，当路由参数变化时重新应用筛选
    presetFilter(newVal) {
      if (newVal) {
        this.applyPresetFilter();
      }
    }
  },
  computed: {
    filteredModels() {
      let filtered = this.models;

      // 按模型类型筛选
      if (this.selectedModelTypes.length > 0) {
        filtered = filtered.filter(model => this.selectedModelTypes.includes(model.modelType));
      }

      // 按类别筛选
      if (this.selectedCategories.length > 0) {
        filtered = filtered.filter(model => this.selectedCategories.includes(model.type));
      }

      // 按提供方筛选
      if (this.selectedProviders.length > 0) {
        filtered = filtered.filter(model => this.selectedProviders.includes(model.company));
      }

      // 按适用场景筛选
      if (this.selectedScenarios.length > 0) {
        filtered = filtered.filter(model =>
          this.selectedScenarios.some(scenario => model.scenarios.includes(scenario))
        );
      }

      // 按搜索词筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        filtered = filtered.filter(model =>
          model.name.toLowerCase().includes(query) ||
          model.description.toLowerCase().includes(query) ||
          (model.company && model.company.toLowerCase().includes(query)) ||
          model.type.toLowerCase().includes(query) ||
          model.modelType.toLowerCase().includes(query) ||
          model.scenarios.some(scenario => scenario.toLowerCase().includes(query))
        );
      }

      return filtered;
    },
    // 是否有活跃的筛选条件
    hasActiveFilters() {
      return this.selectedModelTypes.length > 0 ||
        this.selectedCategories.length > 0 ||
        this.selectedScenarios.length > 0 ||
        this.selectedProviders.length > 0 ||
        this.searchQuery !== '';
    }
  },
  methods: {
    handleLogin() {
      this.isLoggedIn = true;
      this.$emit('login');
    },
    goToConsole() {
      this.$emit('go-to-console');
    },
    toggleTheme() {
      this.$emit('toggle-theme');
    },
    toggleModelType(type) {
      const index = this.selectedModelTypes.indexOf(type);
      if (index > -1) {
        this.selectedModelTypes.splice(index, 1);
      } else {
        this.selectedModelTypes.push(type);
      }
    },
    toggleCategory(category) {
      const index = this.selectedCategories.indexOf(category);
      if (index > -1) {
        this.selectedCategories.splice(index, 1);
      } else {
        this.selectedCategories.push(category);
      }
    },
    toggleScenario(scenario) {
      const index = this.selectedScenarios.indexOf(scenario);
      if (index > -1) {
        this.selectedScenarios.splice(index, 1);
      } else {
        this.selectedScenarios.push(scenario);
      }
    },
    toggleProvider(provider) {
      const index = this.selectedProviders.indexOf(provider);
      if (index > -1) {
        this.selectedProviders.splice(index, 1);
      } else {
        this.selectedProviders.push(provider);
      }
    },
    applyPresetFilter() {
      if (this.presetFilter && this.presetFilters[this.presetFilter]) {
        const preset = this.presetFilters[this.presetFilter];

        // 重置所有筛选条件
        this.selectedModelTypes = [];
        this.selectedCategories = [];
        this.selectedScenarios = [];
        this.selectedProviders = [];

        // 应用预设筛选条件
        if (preset.selectedModelTypes) {
          this.selectedModelTypes = [...preset.selectedModelTypes];
        }
        if (preset.selectedCategories) {
          this.selectedCategories = [...preset.selectedCategories];
        }
        if (preset.selectedScenarios) {
          this.selectedScenarios = [...preset.selectedScenarios];
        }
        if (preset.selectedProviders) {
          this.selectedProviders = [...preset.selectedProviders];
        }
      }
    },
    // 清除筛选的方法
    clearFilters() {
      this.selectedModelTypes = [];
      this.selectedCategories = [];
      this.selectedScenarios = [];
      this.selectedProviders = [];
      this.searchQuery = '';
    },
    // 获取logo颜色类
    getLogoColorClass(id) {
      const colors = ['flat-blue', 'flat-green', 'flat-orange', 'flat-cyan', 'flat-purple', 'flat-red', 'flat-teal', 'flat-indigo'];
      return colors[id % colors.length];
    },
    // 获取显示的场景标签（最多显示3个）
    getDisplayScenarios(scenarios) {
      return scenarios.slice(0, 3);
    },
    // 处理立即探索按钮点击
    handleExplore(model) {
      console.log('探索模型:', model.name);
      // 这里可以添加跳转到模型详情页或其他交互逻辑
      this.$emit('explore-model', model);
    }
  }
}
</script>

<style scoped>
/* 确保 NavBar 和 Footer 样式不受影响的关键设置 */
.model-showcase {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #f8fafc;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 为 NavBar 预留空间，防止内容被遮挡 */
.model-showcase {
  padding-top: 80px; /* 根据 NavBar 高度调整 */
}

/* 页面标题部分 - 修改为白色背景带边框 */
.page-header {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 40px 20px;
  margin: 0 20px 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.page-header h1 {
  font-size: 46px;
  color: #000000;
  margin-bottom: 12px;
  font-weight: 700;
}

.ai-text {
  color: #3b82f6;
}

.page-header p {
  font-size: 20px;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.main-content {
  display: flex;
  gap: 24px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 左侧筛选栏样式 */
.filter-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 20px;
  align-self: flex-start;
  position: sticky;
  top: 100px; /* 考虑 NavBar 高度 */
}

.sidebar-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-group h4 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.button-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.filter-button {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.filter-button:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.filter-button.active {
  background-color: #6366f1;
  color: white;
  border-color: #6366f1;
}

/* 右侧模型区域样式 */
.models-container {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 20px;
}

.models-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.models-count {
  font-size: 20px;
  color: #6b7280;
}

.count-number {
  font-weight: 600;
  color: #3b82f6;
  font-size: 22px;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* 替换原有的.search-input样式 */
.search-input {
  padding: 12px 16px 12px 40px; /* 增加内边距 */
  border: 1px solid #d1d5db;
  border-radius: 8px; /* 增加圆角 */
  width: 800px; /* 增加宽度 */
  height: 44px; /* 增加高度 */
  font-size: 16px;
  outline: none;
  transition: all 0.2s;
  background-color: white;
  box-sizing: border-box; /* 确保padding不影响总宽度 */
}

.search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  width: 340px; /* 聚焦时稍微加宽 */
}

/* 调整搜索图标位置 */
.search-icon {
  left: 14px; /* 根据新的padding调整 */
  width: 18px;
  height: 18px;
}
/* 筛选状态栏 - 移除背景条样式 */
.filter-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 0 16px 0;
  margin-bottom: 0;
}

.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.active-filter-tag {
  background: #e0e7ff;
  color: #3730a3;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.clear-filters-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #6b7280;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-filters-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* 模型网格布局 - 调整为更紧凑的3列 */
.models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 模型卡片样式 - 重新设计为更紧凑的长方形，字体增大2号 */
.model-card {
  background: white;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #6b7280;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px; /* 固定最小高度，使卡片更接近长方形 */
  position: relative;
  overflow: hidden;
}

.model-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #3b82f6;
}



/* 卡片顶部区域 - 紧凑布局，字体增大2号 */
.card-top {
  margin-bottom: 12px; /* 减少间距 */
}

.model-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0; /* 移除底部边距 */
}

.model-basic-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.model-logo {
  width: 44px; /* 稍微缩小Logo */
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 30px; /* 增大字体 */
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.model-title-section {
  flex: 1;
}

.model-name {
  margin: 0 0 6px 0; /* 减少间距 */
  font-size: 22px; /* 增大字体2号 */
  font-weight: 700;
  color: #000000;
  line-height: 1.2; /* 紧凑行高 */
}

.model-type-tags {
  display: flex;
  gap: 6px; /* 减少间距 */
  flex-wrap: wrap;
}

.model-type-tag, .category-tag, .deployment-tag {
  padding: 4px 8px; /* 减少内边距 */
  border-radius: 12px;
  font-size: 13px; /* 增大字体2号 */
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.model-type-tag {
  background: #dbeafe;
  color: #1e40af;
}

.category-tag {
  background: #f0fdf4;
  color: #166534;
}

.deployment-tag {
  background: #dcfce7;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 3px; /* 减少间距 */
}

/* 卡片中部区域 - 紧凑布局，字体增大2号 */
.card-middle {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px; /* 减少内边距 */
  margin-bottom: 12px; /* 减少间距 */
}

.scenarios-section {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* 减少间距 */
}

.scenarios-label {
  font-size: 15px; /* 增大字体2号 */
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  padding-top: 1px;
}

.scenarios-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* 减少间距 */
  flex: 1;
}

.scenario-tag {
  background: #ffffff;
  color: #374151;
  padding: 4px 8px; /* 减少内边距 */
  border-radius: 4px;
  font-size: 14px; /* 增大字体2号 */
  font-weight: 500;
  border: 1px solid #e5e7eb;
  line-height: 1.2;
}

.more-scenarios {
  color: #6b7280;
  font-size: 13px; /* 增大字体2号 */
  padding: 4px 6px;
}

/* 卡片底部区域 - 紧凑布局，字体增大3号并显示完整内容 */
.card-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.model-description {
  font-size: 14px; /* 增大3号（从14px增加到17px） */
  line-height: 1.6; /* 增加行高以改善可读性 */
  color: #4b5563;
  margin: 0 0 12px 0;
  /* 移除省略号相关样式，显示完整内容 */
  display: block;
  overflow: visible;
  white-space: normal;
  flex: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px; /* 减少内边距 */
  border-top: 1px solid #f1f5f9;
  margin-top: auto; /* 确保footer在底部 */
}

.update-info {
  display: flex;
  align-items: center;
  gap: 4px; /* 减少间距 */
  font-size: 15px; /* 增大字体2号 */
  color: #6b7280;
}

/* 立即探索按钮样式 */
.explore-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-left: 12px;
}

.explore-button:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.explore-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}

/* 扁平化颜色背景类 */
.flat-blue { background-color: #3b82f6; }
.flat-green { background-color: #10b981; }
.flat-orange { background-color: #f59e0b; }
.flat-cyan { background-color: #06b6d4; }
.flat-purple { background-color: #8b5cf6; }
.flat-red { background-color: #3b82f6; }
.flat-teal { background-color: #14b8a6; }
.flat-indigo { background-color: #6366f1; }

/* 无结果状态 */
.no-results {
  text-align: center;
  padding: 60px 20px;
}

.no-results-content h3 {
  font-size: 20px;
  color: #374151;
  margin: 16px 0 8px;
}

.no-results-content p {
  color: #6b7280;
  margin-bottom: 20px;
}

.clear-filters-btn.large {
  padding: 10px 20px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .models-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1200px) {
  .models-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .model-showcase {
    padding-top: 70px;
  }

  .main-content {
    flex-direction: column;
    padding: 0 15px 30px;
  }

  .filter-sidebar {
    width: 100%;
    position: static;
  }

  .models-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .search-input {
    width: 100%;
  }

  .model-header {
    flex-direction: column;
    gap: 10px;
  }

  .model-basic-info {
    flex-direction: row;
  }

  .card-footer {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .explore-button {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 30px 15px;
    margin: 0 15px 30px;
  }

  .page-header h1 {
    font-size: 28px;
  }

  .model-card {
    padding: 16px;
    min-height: 260px;
  }

  .model-basic-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .model-type-tags {
    justify-content: center;
  }
}

/* 确保样式隔离，不影响 NavBar 和 Footer */
:deep(.navbar) {
  /* 确保 NavBar 样式不被覆盖 */
}

:deep(.footer) {
  /* 确保 Footer 样式不被覆盖 */
}
</style>
